<template>
    <div class="tab-container-view">
        <a-tabs v-model:activeKey="activeKey" :type="config.tabType" @change="change" :tabPosition="config.tabPosition">
            <a-tab-pane v-for="(tabItem,index) in tabList" :key="tabItem.id">
                <template #tab>
                    <rx-icon-show v-if="tabItem.icon" :icon="iconName(tabItem.icon)"></rx-icon-show>
                    {{ tabItem.name }}
                </template>
                <div class="tab-common">
                    <div class="tab-common-defConf" v-if="tabItem.defConf">
                        <formCustomControl :localParams="localParams" :item="tabItem" :charBoardAppId="appId" :ref="tabItem.id"></formCustomControl>
                    </div>
                </div>
            </a-tab-pane>
            <template #rightExtra>
                <custom-tool-bar ref="preview" v-if="preview"
                                 :customBtnConfig="activeObj.config"
                                 @refreshChange="refreshChange"
                                 @handleCustomFun="handleCustomFun"
                />
            </template>
        </a-tabs>

    </div>
</template>

<script>
/**
 * 自定义页面(tab容器组件)
 */
import {defineAsyncComponent} from 'vue';
import CustomToolBar from './CustomToolBar.vue'
import FormCustomPublic from "../FormCustomPublic";
import userUser from "@/stores/userUser";
import {mapState} from "pinia";
export default {
    name: "tabContainerView",
    inject:['appId'],
    mixins:[FormCustomPublic],
    components: {
        CustomToolBar,
        formCustomControl: defineAsyncComponent(() => import('@/views/modules/form/FormCustomView/GridLayoutView/FormCustomControl.vue'))
    },
    props: {
        config: {}
    },
    computed:{
        ...mapState(userUser,['user'])
    },
    data() {
        return {
            preview: false,
            activeObj: {},
            activeKey: "1",
            tabList: [],
            params:{},
        }
    },
    created() {
         this.params=this.getRouterParams();
        this.initConfig();
        if (this.tabList.length > 0) {
            this.activeKey = this.tabList[0].id;
            this.isPreview(this.activeKey);
        }
    },
    methods: {
        change(activeKey) {
            let self=this;
            self.isPreview(activeKey);
            self.$nextTick(() => {
                self.$refs[activeKey][0].change();
                if(self.$refs.preview && self.$refs.preview.changeConfig){
                    self.$refs.preview.changeConfig(self.activeObj.config);
                }
            })
        },
        i18n(name, text, key) {
            return this.$ti18(name, text, "formCustom", key);
        },
        handleCustomFun(btn) {
            this.$refs[this.activeObj.id][0].handleCustomFun(btn);
        },
        refreshChange() {
            this.$refs[this.activeObj.id][0].refreshChange();
        },
        isPreview(id) {
            this.activeObj = this.tabList.find(item => {
                return item.id == id;
            });
            let config = this.activeObj.config;
            if (config.customBtnJson) {
                let customBtnJson = JSON.parse(config.customBtnJson);
                if (customBtnJson.btnConfig && customBtnJson.btnConfig.length > 0) {
                    this.preview = true;
                    return;
                }
            }
            this.preview = false;
        },
        initConfig() {
            this.tabList = [];
            if (this.config && this.config.tabs) {
                this.config.tabs.map(item=>{
                    if(item.tabScript){
                        if(this.tabButtonShow(item.tabScript)){
                            this.tabList.push(item)
                        }
                    }else {
                        this.tabList.push(item)
                    }
                })
            }
        },
        handPublicReceive(conf) {
            for (let i = 0; i < this.config.tabs.length; i++) {
                let layout = this.config.tabs[i];
                if (!layout.config) {
                    return;
                }
                if (!this.$refs[layout.id]) {
                    return;
                }
                let control = this.$refs[layout.id][0];
                //触发组件中的公共事件
                if (control && control.$refs[layout.config.alias] && control.$refs[layout.config.alias].handPublicReceive) {
                    //tab容器时需要触发控件内的组件事件
                    if (layout.defConf == "tabContainer") {
                        control.$refs[layout.config.alias].handPublicReceive(conf);
                    } else {
                        control.$refs[layout.config.alias].handPublicEvent(conf);
                    }
                }
            }
        },
        iconName(icon){
            if(icon){
                if(icon.indexOf('{')==-1){
                    return icon;
                }
                let name = JSON.parse(icon).icon;
                return name;
            }
            return ''
        },
        tabButtonShow(script){
            if(!script){
                return true
            }
            if(!script.includes('return')){
                script = 'return '+script
            }
            try {
                let fn = new Function("params", "user",script).bind(this);
                let rtn = fn(this.params, this.user);
                return rtn;
            }catch (e) {
                return true
            }
        }
    },
    watch: {
        config: {
            handler: function (val, oldval) {
                this.initConfig();
            },
            deep: true
        },
    },
}
</script>

<style scoped>
.tab-common {
    width: 100%;
    height: calc(100% - 40px);
    overflow: auto;
    padding: 10px;
}

.tab-common-defConf {
    width: 100%;
    height: 100%;
    overflow: auto;
    position: relative;
}

.tab-container-view {
    width: 100%;
    height: 100%
}

.tab-container-view >>> .ant-tabs-right-content {
    height: 100%;
    padding-right: 1px !important;
}

.tab-container-view >>> .ant-tabs-bar {
    margin-bottom: 1px !important;
}

.tab-container-view >>> .ant-tabs-bottom-content {
    height: calc(100% - 50px);
}

.tab-container-view >>> .ant-tabs-bottom-bar {
    margin-top: 1px !important;
}

.tab-container-view >>> .ant-tabs-left-content {
    padding-left: 1px !important;
}
</style>
